<template>
	<view class="content">
		<u-navbar :isBack="false" :title-color="color" title="个人中心" :background="{backgroundColor:opt}" :borderBottom="false" :fixed="true"></u-navbar>
		<view class="user flex-bt" v-if="userInfo">
			<image :src="'https://www.jiumeifu.cc' + userInfo.logo" mode="aspectFill" class="face"></image>
			<!-- <image src="/static/2.png" mode="widthFix" class="kuang"></image> -->
			<view class="font">
				<view class="h3">
					{{userInfo.name}}
				</view>
				<view class="p">
					地址：{{userInfo.address}}
				</view> 
			</view>
			<!-- <image src="/static/user/icon11.png" mode="widthFix" class="icon"></image> -->
		</view>
		<view class="user flex-bt" v-else @tap="toUrl('/pages/login/login')">
			<image src="https://www.jiumeifu.cc/static/shop/img/default_user.png" mode="aspectFill" class="face"></image>
			<view class="font">
				<view class="h3">
					去登录
				</view>
			</view>
		</view>
		<view class="container">
			<!-- 选项跳转 -->
			<view class="bgf-wrap link-wrap">
				<u-grid :col="2">
					<u-grid-item @tap="scode">
						<!-- <image src="/static/user/icon2.png" mode="widthFix" class="icon"></image> -->
						<u-icon name="scan" color="#000" size="40"></u-icon>
						<view class="grid-text">扫描二维码</view>
					</u-grid-item>
					<u-grid-item @tap="show = true,type = 1">
						<image src="/static/user/icon17.png" mode="widthFix" class="icon"></image>
						<view class="grid-text">自提订单核销</view>
					</u-grid-item>
					<u-grid-item @tap="show = true,type = 2">
						<u-icon name="order" color="#000" size="40"></u-icon>
						<view class="grid-text">虚拟订单兑换</view>
					</u-grid-item>
					<u-grid-item @tap="toUrl(`vOrder_list`,2)">
						<u-icon name="coupon" color="#000" size="40"></u-icon>
						<view class="grid-text">虚拟订单列表</view>
					</u-grid-item>
					<u-grid-item @tap="toUrl(`local_list`,2)">
						<u-icon name="coupon" color="#000" size="40"></u-icon>
						<view class="grid-text">线下买单列表</view>
					</u-grid-item>
					<u-grid-item @tap="toUrl(`return_list`,2)">
						<u-icon name="calendar" color="#000" size="40"></u-icon>
						<view class="grid-text">退款列表</view>
					</u-grid-item>
					<u-grid-item @tap="toUrl(`balance_list`,2)">
						<image src="/static/user/icon6.png" mode="widthFix" class="icon"></image>
						<view class="grid-text">资金流水</view>
					</u-grid-item>
					<!-- <u-grid-item @tap="toUrl(`widthdraw`)">
						<image src="/static/user/icon3.png" mode="widthFix" class="icon"></image>
						<view class="grid-text">资金提现</view>
					</u-grid-item> -->
					
					<u-grid-item @tap="exit" v-if="userInfo">
						<u-icon name="setting-fill" color="#000" size="40"></u-icon>
						<view class="grid-text">退出登录</view>
					</u-grid-item>
					<u-grid-item @tap="call">
						<image src="/static/user/icon9.png" mode="widthFix" class="icon"></image>
						<view class="grid-text">电话客服</view>
					</u-grid-item>
					<!-- <u-grid-item @tap="toRoom">
						<image src="/static/user/icon9.png" mode="widthFix" class="icon"></image>
						<view class="grid-text">在线客服</view>
					</u-grid-item> -->
					
				</u-grid>
			</view>
		</view>
		
		<u-popup v-model="show" mode="center" border-radius="20">
			<view class="pay-success">
				<view class="pay-tit">
					{{type == 1 ? '自提码核销':'虚拟订单兑换'}}
				</view>
				<view class="ct login-wrap">
					<view class="form-item">
						<input type="text" v-model="submitCode" class="form-txt" placeholder-class="pla" placeholder="请输入核销码" />
					</view>
					<view class="flex-bt" style="width: 400rpx;margin: 0 auto;">
						<view class="min-btn bg-red border" @tap="show = false,submitCode = ''">
							关闭
						</view>
						<view class="min-btn bg-red" @tap="$u.throttle(submit, 1500)">
							提交验证
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import { mapState, mapMutations, mapGetters } from 'vuex';
	import {user_info,vrOrder_exchange ,order_exchange} from '@/config/user/api.js';
	import storge from '@/common/storge.js';
	
	export default {
		data() {
			return {
				// 滚动导航栏方法
				opt:'#ff6a6c',
				color:'#fff',
				nav:[{
					categoryName:'商场订单'
				},{
					categoryName:'秒杀订单'
				},{
					categoryName:'积分订单'
				}],
				typeCurrent:0,
				show: false,
				submitCode:'',
				type: 1,
			}
		},
		components: {
			
		},
		onLoad(o) {
			
		},
		onShow() {
			const token = uni.getStorageSync('token');
			this.getUser();
		},
		onShareAppMessage() {
		    
		},
		
		onShareAppMessage() {
			
		},
		onPageScroll(e) {
			let o = e.scrollTop / 100 > 0.9 ? 1 : e.scrollTop / 100;
			if (o > 0.3) {
				this.color = '#333';
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: '#ffffff',
					animation: {
						duration: 10,
						timingFunc: 'easeIn'
					}
				})
				this.opt = '#fff';
			} else {
				this.color = '#fff';
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#000000',
					animation: {
						duration: 10,
						timingFunc: 'easeIn'
					}
				})
				this.opt = '#ff6a6c';
			}
			
		},
		watch:{
			
		},
		computed: {
			...mapState({
			    userInfo: 'userInfo',
			})
		},
		methods: {	
			async getUser(){
				const token = uni.getStorageSync('token');
				if(token){
					const userInfo =  await user_info();
					console.log('userInfo====',userInfo);
					storge.set('memberInfo',userInfo.data);
					this.$store.commit('setUserInfo', userInfo.data);
				};
			},
			tabChange(index){
				const that = this;
				that.typeCurrent = index;
			},
			back(){
				this.$common.goback()
			},
			toUrl(url,type = 1){
				if(type == 1){
					uni.navigateTo({
						url
					})
				}else{
					if(!this.userInfo){
						uni.navigateTo({
							url:'/pages/login/login'
						})
						return
					};
					uni.navigateTo({
						url
					})
				}
			},
			call(){
				uni.makePhoneCall({
					phoneNumber: '020-31239299'
				})
				// let data = {
				// 	avatar: this.userInfo.headimg,
				// 	name: this.userInfo.nickname,
				// };
				// let path = '/pages/chat/chat_room?to=' + '6ec2c1df-24f4-4c33-a16c-d0c9de69ac09' + '&type=CS' + '&data=' + JSON.stringify(data);
				// uni.navigateTo({
				// 	url:path
				// })
			},
			toRoom(){
				uni.navigateTo({
					url: 'webLink?kf=' + true
				})
			},
			async scode(){
				const that = this;
				if(!this.userInfo){
					uni.navigateTo({
						url:'/pages/login/login'
					})
					return
				};
				
				uni.scanCode({
					success: function (res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						if(!res.result.includes('jiumeifu')){
							that.$common.showTip('请扫描正确的兑换码', 'none')
							return
						};
						let paramData = that.$common.getUrlParams(res.result);
						console.log(paramData);
						
						uni.showModal({
						    title: '提示',
						    content: '是否核销商品兑换码',
						    success: async function (res) {
						        if (res.confirm) {
						            console.log('用户点击确定');
									let res; 
									if(paramData?.order_type){
										console.log('实体订单')
										res = await order_exchange({ziti_code:paramData.order_sn});
									}else{
										console.log('虚拟订单')
										res = await vrOrder_exchange({vr_code:paramData.vr_code});
									}
						            // 用户点击了确定，执行相应的逻辑
									console.log(res);
									if (res.code != 1) {
										that.$common.showTip(res.msg, 'none')
										return
									};
									that.$common.showTip(res.msg, 'none');
						        } else if (res.cancel) {
						            console.log('用户点击取消');
						            // 用户点击了取消，执行相应的逻辑
						        }
						    }
						});
					}
				});
			},
			async submit(){
				const that = this;
				let res;
				if(that.type == 2){
					res = await vrOrder_exchange({vr_code:that.submitCode});
				}else if(that.type == 1){
					res = await order_exchange({ziti_code:that.submitCode});
				}
				console.log(res);
				if (res.code != 1) {
					that.$common.showTip(res.msg, 'none')
					return
				};
				that.$common.showTip(res.msg, 'none');
				that.submitCode = '';
			},
			copyText(){
				
			},
			async exit(){
				const that = this;
				// const res = await logout();
				// if (res.code != 1) {
				// 	this.$common.showTip(res.msg, 'none')
				// 	return
				// };
				
				this.$common.showTip('已退出当前账号', 'none');
				storge.remove('memberInfo');
				storge.remove('token');
				that.$store.commit('setUserInfo', null);
				that.$store.commit('setToken', null);
				setTimeout(()=>{
					that.$common.goback();
				},1500)
			},
			
			...mapMutations(['setUserInfo','setTeamInfo'])
		}
	}
</script>

<style>
	page{
		background: #f6f6f6;
	}
</style>
<style scoped lang="scss">
	.grid-text{
		font-size: 30rpx;
		margin-top: 15rpx;
	}
	.user{
		position: relative;
		.kuang{
			width: 200rpx;
			position: absolute;
			top: 0;
			left: 0;
		}
	}
	.link-wrap{
		margin-top: 16rpx;
		.w{
			font-size: 0;
			height: 40rpx;
			margin-right: 24rpx;
		}
		.icon{
			width: 40rpx;
		}
		::v-deep .u-grid-item-box{
			padding: 40rpx 0 !important;
		}
	}
	.content{
		padding-bottom: 40rpx;
	}
	.user{
		padding: 40rpx;
		padding-top: 20rpx;
		background: $red;
		.face{
			width: 136rpx;
			height: 136rpx;
			margin-right: 30rpx;
			border-radius: 50%;
		}
		.font{
			flex: 1;
			color: $white;
			line-height: 160%;
			.h3{
				font-size: 32rpx;
				font-weight: 600;
			}
			.p{
				font-size: 28rpx;
			}
		}
		.icon{
			width: 50rpx;
		}
	}
	.top-bar{
		margin-top: 40rpx;
		padding: 20rpx 0;
	}
	.order-wrap{
		.item{
			width: 20%;
			flex-direction: column;
			height: 158rpx;
			position: relative;
			.icon{
				width: 50rpx;
				margin-bottom: 12rpx;
			}
			.p{
				font-weight: 400;
				font-size: 26rpx;
				line-height: 52rpx;
				color: #464646;
			}
			.badge{
				padding: 0;
				min-width: 40rpx;
				padding: 0 8rpx;
				height: 40rpx;
				background: #E5574D;
				position: absolute;
				border: 2px solid #FFFFFF;
				top: 16rpx;
				right: 20rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				border-radius: 20rpx;
	
			}
		}
	}
	.login-wrap {
	    width: 100%;
	    .forms {
	        width: 100%;
	        padding: 30upx 60upx 10upx;
	    }
	    .form-item {
	        position: relative;
	        padding: 10rpx 18upx;
	        border: 1px solid #eee;
			width: 480rpx;
			margin: 0 auto 15rpx;
			text-align: left;
			border-radius: 10rpx;
	        .form-txt {
	            width: 100%;
	            height: 30px;
	            padding-left: 20upx;
	            line-height: 30px;
				color: #2C405A;
	        }
			.pla{
				color: #b9cad7;
			}
	        &.tel {
	            padding-left: 60px;
	            text {
	                position: absolute;
	                left: 0;
	                top: 20upx;
	                height: 20px;
	                line-height: 20px;
	                transform: translate(0, 5px);
	                padding: 0 20upx 0 40upx;
	                border-right: 1px solid #ddd;
	            }
	        }
	        &.code {
	            padding-right: 200rpx;
	            .btnget {
	                height: 30px;
	                line-height: 30px;
	                border-radius: 50px;
	                color: #fff;
	                padding: 0 0.75rem;
	                position: absolute;
	                right: 10rpx;
	                font-size: 13px;
	                font-weight: bold;
	                top: 0;
					bottom: 0;
					margin: auto;
					border-radius: 20rpx;
	                z-index: 8;
	                &.active {
	                    background: #999;
	                }
	            }
	        }
	    }
	    .btn-look{
	        position: absolute;
	        right: 0;
	        transform: translate(0,-50%);
	        top: 50%;
	        padding: 5px;
	        .icon{
	            width: 40rpx;
	            height: 36rpx;
	            display: block;
	        }
	    }
	
	    .forget {
	        text-align: center;
	        margin: 20rpx 0;
			font-size: 28rpx;
			color: #b9cad7;
	        text{
	            display: inline-block;
	            padding: 10rpx 30rpx;
	        }
	    }
	
	    .btnbox {
	        padding: 0;
	        margin: 40rpx 0 0;
	        .btn-sub{
				font-size: 32rpx;
				color: #ffffff;
				border-radius: 20rpx;
	            height: 90rpx;
	            line-height: 90rpx;
	            &.grey{
	                background: #aaa;
	            }
	        }
	    }
	    .create {
	        text-align: center;
	        text {
	            color: #333;
	            border-bottom: 1px solid #333;
	        }
	    }
	
	    .arg {
	        padding: 10upx 0;
	        font-size: 13px;
	        .icon {
	            width: 15px;
	            height: 15px;
	            vertical-align: middle;
	            margin-right: 10upx;
	        }
	        text {
	            vertical-align: middle;
	        }
	    }
	}
</style>